import React, {useState} from 'react'
import {Link, Outlet} from 'react-router-dom'

export default function News() {

  const [messages] = useState ([
    {id: '001', title: '消息1', content: '锄禾日当午'},
    {id: '002', title: '消息2', content: '锄禾日当午'},
    {id: '003', title: '消息3', content: '锄禾日当午'},
    {id: '004', title: '消息4', content: '锄禾日当午'}
  ])

  return (
    <div>
      <ul>
        {
          messages.map ((m) => {
            return (
              <li key={m.id}>
                <Link to={`detail/?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
              </li>
            )
          })
        }
      </ul>
      <hr />
      <Outlet></Outlet>
    </div>
  )
}